<template>
  <Dialogdrawerdefect
    :ddtvisible="hisDialogVisible"
    size="500px"
    :has-modal="false"
    :modal="false"
    @close="handleClose"
    :title="!ruleForm.id ? 'HIS新增': `HIS编辑【${ruleForm.bigpart}】`">
    <div class="cont_box" style="padding-top: 0px !important;" v-loading="saveLoading">
      <section class="dialog-con">
        <el-form class="rule-form" ref="form" inline :model="ruleForm" :rules="rules">
          <el-form-item label="医院名称" prop="hospitalCode" class="short-input">
            <el-select
              style="width:100%"
              size="small"
              v-model="ruleForm.hospitalCode"
              @change="handleChange('hospital')"
              placeholder="请选择医院"
            >
              <el-option
                v-for="item in mx_hospitalList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查部门" prop="dep" class="short-input">
            <el-select
              style="width:100%"
              size="small"
              v-model="ruleForm.dep"
              @change="handleChange('dep')"
              placeholder="请选择"
              clearable
              filterable
              collapse-tags
            >
              <el-option
                v-for="item in depOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="checkGroup" class="short-input">
            <template slot="label">
              <span>检查分组</span>
              <el-tooltip class="item" effect="dark" content="" placement="top-start">
                <template slot="content">
                  相应申请单根据检查分组查询号源，主要是为了避免<br/>
                  胃肠镜或增强磁共振等根据设备查最近号源，但是查<br/>
                  到的是其他内镜或平扫磁共振号源！
                </template>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
            <el-select size="small" class="param-type_input" filterable v-model="ruleForm.checkGroup" placeholder="请选择" allow-create multiple clearable>
              <el-option
                v-for="(item,index) in groupOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型" prop="modality" class="short-input">
            <el-select
              style="width:100%"
              size="small"
              v-model="ruleForm.modality"
              placeholder="请选择"
              clearable
              filterable
              collapse-tags
              @change="handleChange('modality')"
            >
              <el-option
                v-for="item in modalityOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部位编码" prop="itemCode" class="short-input">
            <el-input size="small" v-model="ruleForm.itemCode" clearable></el-input>
          </el-form-item>
          <el-form-item label="大部位" prop="bigpart" class="short-input">
            <el-input size="small" v-model="ruleForm.bigpart" clearable></el-input>
          </el-form-item>
          <el-form-item label="大部位英文" prop="bigpartEn" class="short-input">
            <el-input size="small" v-model="ruleForm.bigpartEn" clearable></el-input>
          </el-form-item>
          <el-form-item label="小部位" prop="smallpart" class="short-input">
            <el-input size="small" v-model="ruleForm.smallpart" clearable></el-input>
          </el-form-item>
          <el-form-item label="小部位英文" prop="smallpartEn" class="short-input">
            <el-input size="small" v-model="ruleForm.smallpartEn" clearable></el-input>
          </el-form-item>
          <!-- <el-form-item label="模板部位" prop="templatePart" class="short-input">
            <el-input size="small" v-model="ruleForm.templatePart" clearable></el-input>
          </el-form-item> -->
          <el-form-item label="词库模板部位" prop="templatePart" class="short-input">
            <el-select
              style="width:100%"
              size="small"
              v-model="ruleForm.templatePart"
              placeholder="请选择"
              clearable
              allow-create
              filterable
            >
              <el-option
                v-for="item in templatePartOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部位设备" prop="partModality" class="short-input">
            <template slot="label">
              <span>部位设备 / 扫描方式</span>
              <el-tooltip placement="top">
                <div slot="content">内窥镜登记不用机房的设备，使用部位设备：例如支气管镜、肠镜等<br/>CT和MRI是扫描方式<br/>内窥镜是部位设备</div>
                <i class="el-icon-info"></i>
              </el-tooltip>
              <!-- <el-tooltip :width="50" class="item" effect="dark" content=", CT和MRI是扫描方式, 内窥镜是部位设备" placement="top-start">
                <i class="el-icon-info"></i>
              </el-tooltip> -->
            </template>
            <!-- <el-input size="small" v-model="ruleForm.partModality" clearable></el-input> -->
            <el-select
              style="width:100%"
              size="small"
              v-model="ruleForm.partModality"
              placeholder="请选择"
              clearable
              filterable
              allow-create
            >
              <el-option
                v-for="item in partModalityOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目属性" prop="itemProperty" class="short-input">
            <template slot="label">
              <span>项目属性</span>
              <el-tooltip class="item" effect="dark" content="新增的项目属性，表单提交同时会新增项目属性字典！" placement="top-start">
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
            <el-select
              style="width:100%"
              size="small"
              v-model="ruleForm.itemProperty"
              placeholder="请选择"
              clearable
              filterable
              allow-create
              multiple
              @change="changeItemProperty"
            >
              <el-option
                v-for="item in itempropertyOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <!-- <el-select
              style="width:100%"
              size="small"
              v-model="ruleForm.itemProperty"
              placeholder="请选择"
              clearable
              v-select-create
              filterable
              allow-create
              multiple
              default-first-option
              @change="changeItemProperty"
            >
              <el-option
                v-for="item in itempropertyOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select> -->
          </el-form-item>
          <!-- <el-form-item label="注意事项" prop="examNotice" class="long-input">
            <el-input size="small" v-model="ruleForm.examNotice" clearable type="textarea" :rows="3"></el-input>
          </el-form-item> -->
          <el-form-item label="注意事项字典组" prop="examNoticeGroup" class="short-input">
            <el-select
              style="width:100%"
              size="small"
              v-model="ruleForm.examNoticeGroup"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in examNoticeGroupOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="系数" prop="workCount" class="short-input">
            <el-input-number style="width:100%" size="small" v-model="ruleForm.workCount" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="过滤检查项目" prop="filter" class="short-input repeat-input">
            <el-switch
              size="small"
              v-model="ruleForm.filter"
              active-value="过滤"
              :inactive-value="false"
              active-color="#13ce66"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="是否省对照部位" prop="partType" class="short-input repeat-input">
            <el-switch
              size="small"
              v-model="ruleForm.partType"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="HIS部位代码" prop="hisid" class="short-input">
            <el-input size="small" v-model="ruleForm.hisid" clearable></el-input>
          </el-form-item>
          <el-form-item label="超声部位代码" prop="uisId" class="short-input">
            <el-input size="small" v-model="ruleForm.uisId" clearable></el-input>
          </el-form-item>
          <el-form-item label="省互认项目名称" prop="itemName" class="short-input">
            <el-input size="small" v-model="ruleForm.itemName" clearable></el-input>
          </el-form-item>
          <!-- <el-form-item label="词库模板部位" prop="templatePart" class="short-input">
            <el-select
              style="width:100%"
              size="small"
              v-model="ruleForm.templatePart"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in templatePartOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
      </section>
      <div class="buttons flex flex-row justify-between align-center">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            更多操作<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="reset">重置表单</el-dropdown-item>
            <el-dropdown-item command="delete" v-if="ruleForm.id">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="right-buttons">
          <el-button class="floatR m-l-1" type="primary" size="small" @click="handleSave(true)" v-if="ruleForm.id">已此为模板新建</el-button>
          <el-button type="primary" size="small" @click="handleSave(false)">保 存</el-button>
          <el-button size="small" @click="handleClose">关 闭</el-button>
        </div>
      </div>
    </div>
  </Dialogdrawerdefect>
</template>
<script>
import {
  getDepList,
  getModalityTypeList,
  deleteHisRegister,
  getItemGroupList,
  getCheckGroupList,
  getlistbypartmodality,
  getlistbytemplatepart,
  // getHisRegisterpartGetitempropertylis,
  insertItemList
} from '@/api/api.js'
import Dialogdrawerdefect from '@/components/dialogbox/dialogDrawerDefect'
export default {
  name: 'EditDialog',
  components: {
    Dialogdrawerdefect
  },
  props: {
    hisDialogVisible: {
      type: Boolean,
      default: false
    },
    hisInfo: {
      type: Object,
      default: {}
    },
    hospitalCode: {
      String,
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {
        id: '',
        examNotice: '',
        examNoticeGroup: '',
        workCount: '',
        filter: '',
        hospitalCode: '',
        dep: '',
        checkGroup: [],
        modality: '',
        bigpart: '',
        bigpartEn: '',
        smallpart: '',
        smallpartEn: '',
        itemProperty: [],
        itemCode: '',
        partType: 0,
        hisid: '',
        itemName: '',
        uisId: '',
        partModality: '',
        templatePart: ''
      },
      saveLoading: false,
      depOptions: [],
      partModalityOptions: [], // 部位设备
      modalityOptions: [],
      itempropertyOptions: [], // 项目属性
      groupOptions: [], // 检查分组列表
      examNoticeGroupOptions: [], // 注意事项
      templatePartOptions: [], // 词库模板部位
      rules: {
        hospitalCode: { required: true, message: '请选择医院', trigger: 'blur' },
        dep: { required: true, message: '请选择检查部门', trigger: 'blur' },
        modality: { required: true, message: '请选择检查设备', trigger: 'blur' },
        bigpart: { required: true, message: '请填写大部位', trigger: 'blur' },
        smallpart: { required: true, message: '请填写小部位', trigger: 'blur' },
        itemCode: { required: true, message: '请填写部位编码', trigger: 'blur' },
        hisid: { required: true, message: '请填写HIS部位代码', trigger: 'blur' }
      }
    }
  },
  watch: {
    hisDialogVisible(val) {
      if (val) {
        this.$getHospitalList()
      }
    }
  },
  mounted() {
    let a = [1, 3, 5, 7]
    let b = [1, 3, 4, 5, 6]
    console.log('includes', this.filterNewArray(a, b))
  },
  methods: {
    // 在两个数组中，过滤出新的子集
    filterNewArray(arrOld, arrNew) {
      let result = []
      arrNew.forEach(newItem => {
        if (!arrOld.includes(newItem)) {
          result.push(newItem)
        }
      })
      return result
    },
    init(data) {
      this.handleReset()
      this.handleChange('hospital', data)
      if (data) {
        this.ruleForm = JSON.parse(JSON.stringify(data))
        this.ruleForm.itemProperty = data.itemProperty ? this.ruleForm.itemProperty.split(',') : []
        this.ruleForm.checkGroup = data.checkGroup ? this.ruleForm.checkGroup.split(',') : []
        this.getItempropertyOptions()
        this.getModalityOptions()
        this.getItemGroupOptions()
        this.getCheckGroupOptions()
        this.getPartModalityOptions()
        this.getlistbytemplatePart()
      } else {
        this.ruleForm.hospitalCode = this.hospitalCode
      }
    },
    handleClose() {
      this.$emit('myClose')
    },
    handleSave(addFlag) {
      this.$emit('saveHis', this.ruleForm, addFlag)
      // if (!this.itempropertyOptions.includes(this.ruleForm.itemProperty)) {
      //   // 注释重复
      //   // this.sendAddDic(this.ruleForm.itemProperty)
      // }
      const addItem = this.filterNewArray(this.itempropertyOptions, this.ruleForm.itemProperty)
      if (addItem.length) {
        addItem.forEach(item => {
          this.sendAddDic(item)
        })
      }
    },
    changeItemProperty(e) {
      console.log('changeItemProperty', e)
    },
    handleChange(val, data) {
      switch (val) {
        case 'hospital':
          this.depOptions = []
          this.modalityOptions = []
          this.itempropertyOptions = []
          this.examNoticeGroupOptions = []

          this.ruleForm.dep = ''
          this.ruleForm.modality = ''
          this.ruleForm.examNoticeGroup = ''
          this.ruleForm.checkGroup = ''

          try {
            this.getScheduledDepOptions()
            if (!data) {
              this.getItempropertyOptions()
              this.getModalityOptions()
              this.getItemGroupOptions()
              this.getCheckGroupOptions()
            }
          } catch (err) {
            console.log(err)
          }
          break
        case 'dep':
          this.modalityOptions = []
          // this.itempropertyOptions = []
          this.ruleForm.modality = ''
          this.ruleForm.checkGroup = ''
          try {
            this.getModalityOptions()
            this.getCheckGroupOptions()
            // this.getItempropertyOptions()
          } catch (err) {
            console.log(err)
          }
          break
        // case 'modality':
        //   this.itempropertyOptions = []
        //   try {
        //     this.getItempropertyOptions()
        //   } catch (err) {
        //     console.log(err)
        //   }
        //   break
        default:
          break
      }
    },
    // 检查分组
    getCheckGroupOptions() {
      let data = {
        HospitalCode: this.ruleForm.hospitalCode,
        dep: this.ruleForm.dep
      }
      getCheckGroupList(data).then(res => {
        if (res && res.code === 10000) {
          this.groupOptions = res.content.list
        }
      })
    },
    getScheduledDepOptions() {
      /* 检查部门列表 */
      let params = {
        hospitalCode: this.ruleForm.hospitalCode
      }
      return new Promise(resolve => {
        getDepList(params).then((res) => {
          if (res.code === 10000) {
            this.depOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getModalityOptions() {
      /* 检查设备列表 */
      let params = {
        hospitalCode: this.ruleForm.hospitalCode,
        dep: this.ruleForm.dep
      }
      return new Promise(resolve => {
        getModalityTypeList(params).then((res) => {
          if (res.code === 10000) {
            this.modalityOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getItempropertyOptions() {
      /* 项目属性列表 */
      let params = {
        hospitalCode: this.ruleForm.hospitalCode,
        Type: '项目属性'
        // modality: this.ruleForm.modality
      }
      return new Promise(resolve => {
        getItemGroupList(params).then((res) => {
          if (res.code === 10000) {
            this.itempropertyOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getPartModalityOptions() {
      /* 部位设备列表 */
      let params = {
        hospitalCode: this.ruleForm.hospitalCode,
        dep: this.ruleForm.dep,
        modality: this.ruleForm.modality
      }
      return new Promise(resolve => {
        getlistbypartmodality(params).then((res) => {
          if (res.code === 10000) {
            this.partModalityOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getlistbytemplatePart() {
      /* 词库模板部位 */
      let params = {
        hospitalCode: this.ruleForm.hospitalCode,
        dep: this.ruleForm.dep,
        modality: this.ruleForm.modality
      }
      return new Promise(resolve => {
        getlistbytemplatepart(params).then((res) => {
          if (res.code === 10000) {
            this.templatePartOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getItemGroupOptions() {
      /* 数据字典下项目列表 */
      let params = {
        hospitalCode: this.ruleForm.hospitalCode,
        Type: '注意事项'
      }
      return new Promise(resolve => {
        getItemGroupList(params).then((res) => {
          if (res.code === 10000) {
            this.examNoticeGroupOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    handleCommand(command) {
      switch (command) {
        case 'reset':
          this.handleReset()
          break
        case 'delete':
          this.delete()
          break
        default:
          break
      }
    },
    handleReset() {
      this.$refs.form && this.$refs.form.resetFields()
      this.ruleForm = {
        hospitalCode: this.hospitalCode,
        id: '',
        examNotice: '',
        examNoticeGroup: '',
        workCount: '',
        filter: '',
        dep: '',
        modality: '',
        bigpart: '',
        bigpartEn: '',
        checkGroup: '',
        smallpart: '',
        smallpartEn: '',
        templatePart: '',
        itemProperty: '',
        itemCode: '',
        partType: 0,
        hisid: '',
        itemName: '',
        uisId: ''
      }
    },
    delete() {
      /* 删除 */
      this.$confirm('此操作将永久删除该条检查项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData()
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    deleteData() {
      deleteHisRegister({ id: this.ruleForm.id, hospitalCode: this.ruleForm.hospitalCode }).then((res) => {
        if (res.code === 10000) {
          this.$message.success('删除成功')
          this.handleClose()
          this.$emit('refresh')
        }
      })
    },
    sendAddDic(item) {
      const itemPy = window.pinyinUtil.getFirstLetter(item, false).toUpperCase()
      const params = {
        id: null,
        hospitalCode: this.ruleForm.hospitalCode,
        type: '项目属性',
        depArea: '',
        department: '',
        dep: this.ruleForm.dep,
        modality: this.ruleForm.modality,
        item: item,
        itemPy: itemPy,
        itemValue: '',
        sortid: '',
        remark: '',
        remark2: ''
      }
      if (params.hospitalCode === '') {
        this.$message.warning('医院名称不能为空！')
        return
      }
      // if (params.item === '') {
      //   this.$message.warning('项目属性不能为空！')
      //   return
      // }
      // else if (this.ruleForm.dep === '') {
      //   this.$message.warning('检查部门不能为空！')
      //   return
      // } else if (this.ruleForm.modality === '') {
      //   this.$message.warning('设备类型不能为空！')
      //   return
      // }
      // else if (this.ruleForm.bigpart === '') {
      //   this.$message.warning('大部位不能为空！')
      //   return
      // } else if (this.ruleForm.smallpart === '') {
      //   this.$message.warning('小部位不能为空！')
      //   return
      // }
      insertItemList(params).then(res => {
        if (res && res.code === 10000) {
          this.itempropertyOptions.push(item)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.short-input{
    width: 200px;
    margin-right: 19px!important;
    margin-bottom: 3px;
    .el-input{
        width: 200px;
    }
}
.repeat-input{
    /deep/ .el-form-item__content{
        width: 120px;
    }
}
.long-input{
    width: 100%;
    margin-right: 19px!important;
    margin-bottom: 3px;
    /deep/ .el-textarea__inner,.el-input{
        width: 425px;
    }
}
.buttons{
  width: 100%;
}
</style>
